<template>
  <div>
    <el-form
      :model="form"
      :rules="formRules"
      ref="formRef"
      label-position="top"
    >
      <el-form-item label="标题" prop="title" style="width: 50%">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-row :gutter="20" style="width: 50%">
        <el-col :span="12">
          <el-form-item label="网易云歌曲ID" prop="musicId">
            <el-input
              v-model="form.musicId"
              type="number"
              placeholder="请输入网易云歌曲ID（可选）"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评论开关">
            <el-switch
              v-model="form.commentEnabled"
              active-text="评论"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="正文" prop="content">
        <mavon-editor
          v-model="form.content"
          @imgAdd="imgAdd"
          :toolbars="toolbars"
        />
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button type="primary" icon="el-icon-check" @click="submit"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import { getAbout, updateAbout } from "@/api/about";

export default {
  name: "About",
  components: { Breadcrumb },
  data() {
    return {
      form: {
        title: "",
        musicId: null,
        content: "",
        commentEnabled: true,
      },
      formRules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }],
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
        boxShadow: false,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getAbout().then((res) => {
        if (res.code === 200) {
          this.form.title = res.data.title;
          this.form.musicId = res.data.musicId;
          this.form.content = res.data.content;
          this.form.commentEnabled =
            res.data.commentEnabled === "true" ? true : false;
        }
      });
    },
    submit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          //纯数字
          const reg = /^\d{1,}$/;
          if (!reg.test(this.form.musicId)) {
            return this.msgError("歌曲ID有误");
          }
          updateAbout(this.form).then((res) => {
            if (res.code === 200) {
              this.msgSuccess(res.msg);
              console.log(this.form.content);
            }
          });
        } else {
          return this.msgError("请填写必要的表单");
        }
      });
    },
    imgAdd(pos, file) {
      // 上传图片
      var formData = new FormData();
      formData.append("image", file);
      console.log(formData);
      //   this.$axios({
      //     url: this.$http.adornUrl("/article/uploadImageByEditor"), //请求地址
      //     method: "post",
      //     data: formData,
      //     headers: { "Content-Type": "multipart/form-data" },
      //   }).then((url) => {
      //     this.$refs.md.$img2Url(
      //       pos,
      //       "http://localhost:8002/static/image/" + url.data.data
      //     );
      //   });
    },
  },
};
</script>

<style scoped>
</style>